/**
 * Created by sylarSong on 16/12/12.
 */

//************获取图标实例******************
var line_chart_month_loss_rate = echarts.init($('#line-chart-month-loss-rate')[0]); // 用户留存率走势概况
var line_chart_reflux_rate = echarts.init($("#line-chart-reflux-rate")[0]); // 非新增用户曲线
var histogram_chart_active_login = echarts.init($("#histogram-chart-active-login")[0]); // 非新增用户曲线
var line_chart_online_24 = echarts.init($("#line-chart-online-24")[0]); // 24小时在线人数
//!!!!!!!!!!!!!!!准备时间!!!!!!!!!!!!!
$(document).ready(function () {
    line_chart_month_loss_rate.showLoading();
    $.get('/stats_ajax/loss_rate_of_month', {'_': $.now(), 'lost_start_time': lost_start_time, 'lost_end_time': lost_end_time}, function (data) {
        get_month_loss_rate(line_chart_month_loss_rate, data);
    });

    //$.get('/stats_ajax/old_user_login_count', {'_': $.now()}, function (data) {
    //    get_not_newPlayer(line_chart_not_newPlayer, data);
    //});

    line_chart_reflux_rate.showLoading();
    $.get('/stats_ajax/reflux_rate_of_month', {'_': $.now(), 'reflux_start_time': reflux_start_time, 'reflux_end_time': reflux_end_time}, function (data) {
        get_reflux_rate(line_chart_reflux_rate, data);  //  this
    });

    get_active_login(histogram_chart_active_login);

    line_chart_online_24.showLoading();
    $.get('/stats_ajax/per_hour_online_count', {'_': $.now(), 'online_date': online_date}, function (data) {
        get_online_24(line_chart_online_24, data);
    });

});
//!!!!!!!!!!!页面尺寸改变事件!!!!!!!!!!!!!!
window.onresize = function () {
    $("#line-chart-month-loss-rate").width($(".dashboard-widget").width() - 50);
    line_chart_month_loss_rate.resize();
    $("#line-chart-not-newPlayerrate").width($(".dashboard-widget").width() - 50);
    // line_chart_not_newPlayer.resize();
    $("#line-chart-reflux-rate").width($(".dashboard-widget").width() - 50);
    line_chart_reflux_rate.resize();
    $("#histogram-chart-active-login").width($(".dashboard-widget").width() - 50);
    histogram_chart_active_login.resize();
    $("#line_chart_online_24").width($(".dashboard-widget").width() - 50);
    line_chart_online_24.resize();
};
//--------获取当前以前5个月月份-----------
function getPreMonth(date) {
    /**
     * @param: data    例如  new Date()
     * @param: return  时间戳  例如  new Date().getTime()
     * **/
    if (!date)date = new Date();
    var year = date.getFullYear(); //获取当前日期的年份
    var month = date.getMonth(); //获取当前日期的月份
    var day = date.getDate(); //获取当前日期的日
    var oneDay = 1000 * 3600 * 24 * 1;
    var days = new Date(year, month, 0).getDate(); //获取当前日期中月的天数
    var current_time = date.getTime();
    var after_time = current_time - (oneDay * days);
    return after_time;
}
var date = [];
var now = new Date();
for (var i = 0; i < 6; i++) {
    var tem = getPreMonth(new Date(now));
    date.push([new Date(now).getFullYear(), new Date(now).getMonth() + 1].join("-"));
    now = tem;
}

//************用户留存率趋势概况******************
function get_month_loss_rate(instance, data) {
    option = {
        title: {
            text: '流失趋势概况'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['流失率(全部)', '流失率(老用户)', '流失率(付费用户)']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data['months']
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
            }
        },
        series: [
            {
                name: '流失率(全部)',
                type: 'line',
                data: data['all']
            }, {
                name: '流失率(老用户)',
                type: 'line',
                data: data['old']
            }, {
                name: '流失率(付费用户)',
                type: 'line',
                data: data['payment']
            }
        ]
    };
    instance.setOption(option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}

//************用户留存率趋势概况******************
function get_not_newPlayer(instance, data) {

    option = {
        title: {
            text: '非新增用户登录曲线'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['登录率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data['months']
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
            }
        },
        series: [
            {
                name: '登录率',
                type: 'line',
                stack: '总量',
                data: data['data']
            }
        ],
        color: ['#00bbaa']
    };
    instance.setOption(option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}


//************用户回流率趋势概况******************
function get_reflux_rate(instance, data) {

    option = {
        title: {
            text: '用户回流曲线'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['回流率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data['months']
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
            }
        },
        series: [
            {
                name: '回流率',
                type: 'line',
                stack: '总量',
                data: data['rates']
            }
        ],
        color: ['#ffbbaa']
    };
    instance.setOption(option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}


//************签到活跃+签到登录用户概况******************
function get_active_login(instance) {
    var date = [];
    var now = new Date().getTime();
    for (var i = 0; i < 7; i++) {
        date.push([new Date(now).getMonth() + 1, new Date(now).getDate()].join("-"))
        now -= 3600 * 24 * 1000;
    }
    date.reverse();
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['活跃用户', '登录用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: [
            {
                type: 'value'
            }
        ],
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: date
            }
        ],
        series: [
            {
                name: '活跃用户',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                },
                data: [200, 170, 240, 225, 280, 290, 302]
            },
            {
                name: '登录用户',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true
                    }
                },
                data: [320, 302, 341, 440, 450, 550, 560]
            }
        ]
    };
    instance.setOption(option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}

//************24小时在线人数统计******************
function get_online_24(instance, data) {

    option = {
        title: {
            text: '24小时在线人数统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: function () {
                var res = [];
                for (var i = 0; i < 24; i++) {
                    res.push(i);
                }
                return res;
            }()
        },
        yAxis: {
            splitLine: {
                show: false
            }
        },
        toolbox: {
            left: 'center',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: '2014-06-01'
        }, {
            type: 'inside'
        }],
        visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 50,
                color: '#096'
            }, {
                gt: 50,
                lte: 100,
                color: '#ffde33'
            }, {
                gt: 100,
                lte: 150,
                color: '#ff9933'
            }, {
                gt: 150,
                lte: 200,
                color: '#cc0033'
            }, {
                gt: 200,
                lte: 300,
                color: '#660099'
            }, {
                gt: 300,
                color: '#7e0023'
            }],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: '在线人数',
            type: 'line',
            data: data,
            markLine: {
                silent: true,
                data: [{
                    yAxis: 50
                }, {
                    yAxis: 100
                }, {
                    yAxis: 150
                }, {
                    yAxis: 200
                }, {
                    yAxis: 250
                }, {
                    yAxis: 300
                }]
            }
        }
    }

    instance.setOption(option);
    setTimeout(function () {
        instance.hideLoading();
    }, 1000);
}



